<template>
  <div class="notice">
    <h3>未读消息：{{unread}}/{{num}}</h3>
    <div style="position:relative ;height:30px">
      <div class="del">
        <el-button
          type="text"
          icon="el-icon-view"
          v-if="unread!==0"
          @click="changeNotice('changeall','a') "
        >全部已读
        </el-button>
        <el-button
          type="text"
          v-if="num!==0"
          icon="el-icon-delete"
          @click="changeNotice('deleteall','a')"
        >全部删除
        </el-button>
      </div>
    </div>
    <el-divider></el-divider>
    <div v-if="num==0">
      <img src="../../assets/images/noinfo.png" width="100%" alt/>
      <div style="width:100%;text-align:center">暂无消息通知</div>
    </div>
    <div style="position:relative" v-for="(notice,id) in tableData" :key="id">
      <div
        style="width:10px;height:10px;border-radius:50%;display:inline-block"
        :class="`state${notice.state}`"
      ></div>
      <span style="margin-left:20px">{{notice.createtime| dataFormat}}</span>
      <span style="margin-left:20px">{{notice.nickname}}</span>
      <span style="margin-left:20px">{{notice.action}}</span>
      <span style="margin-left:20px">
        来自 {{notice.router| platename}}
        <a
          style="font-size:20px"
          @click="changeNotice('change',notice.notice_id)"
          :href="`${url}/#/${notice.router}/${notice.content_id}`"
          target="_blank"
        >{{notice.content_name}}</a>
      </span>
      <i class="el-icon-delete del" @click="changeNotice('delete',notice.notice_id)"></i>
      <el-divider></el-divider>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'notice',
  data () {
    return {
      tableData: '',
      num: 0
    }
  },
  filters: {
    platename (router) {
      if (router === 'helpcontent') {
        return '问答'
      }
      if (router === 'oldstuffcontent') {
        return '二手交易'
      }
    }
  },
  computed: {
    ...mapState({
      unread: state => state.user.unread,
      url: state => state.url
    })
  },
  methods: {
    ...mapActions('user', ['setunread']),
    async getNoticeList () {
      const result = await this.$axios.post('/web/getnotice', this.qs.stringify({ num: '' }))
      if (result.data.state.type === 'SUCCESS') {
        this.setunread(result.data.data.count)
        this.tableData = result.data.data.list
        this.num = result.data.data.num
      }
    },
    async changeNotice (change, noticeid) {
      const result = await this.$axios.post('/web/changenotice',
        this.qs.stringify({ change: change, notice_id: noticeid })
      )
      console.log(result)
      if (result.data.state.type === 'SUCCESS') {
        this.getNoticeList()
      }
    }
  },
  created () {
    this.getNoticeList()
  }
}
</script>

<style scoped>
  .del {
    position: absolute;
    right: 40px;
    top: 4px;
  }
  .state0 {
    background-color: red;
  }
</style>
